<template>
  <div class="box">
    <!-- 盒子 -->
    <van-row
      type="flex"
      v-for="(item, index, id) in movieList || coming || search "
      :key="id"
    >
      <!-- 图片 -->
      <van-col span="6" class="img"
        ><img
          :src="item.img | setWH('96.140')"
          alt=""
          @click="todetail(item.id)"
      /></van-col>
      <!-- 标题内容 -->
      <van-col offset="1" span="13" @click="todetail(item.id)">
        <!-- 正在上映 片名 评分 演员 场次 上映时间 -->
        <h3  class="van-ellipsis">{{ item.nm }}</h3>
        <div v-if="item.sc>=9===true" class="h3h"><van-tag color="#ffffff" style="height:16px;fontSize:12px" text-color="green"  type="primary">↑</van-tag></div>
      
        <p class="van-ellipsis" v-show="item.sc&&item.sc !== 0">
          心动评分<span> {{ item.sc }}</span>
        </p>
        <p class="van-ellipsis" v-show="item.sc&&item.sc == 0">
          该电影暂无评分<span> {{ item.sc }}</span>
        </p>
        <p class="van-ellipsis" v-show="search">类型：{{ item.cat }}</p>
        <p class="van-ellipsis" v-show="item.star">演员: {{ item.star }}</p>
        <p v-show="movieList" class="van-ellipsis color">{{ item.showInfo }}</p>
        <p class="van-ellipsis" v-show="coming">
          该电影想看人数为 <span class="color">{{ item.wish }}</span> 人
        </p>
        <p class="van-ellipsis" v-show="movieList || coming">
          上映时间：{{ item.comingTitle }}
        </p>
        <p class="van-ellipsis" v-show="search">上映时间：{{ item.rt }}</p>
      </van-col>
      <!-- 购买 -->
      <van-col span="4">
        <span
          v-show="movieList"
          class="buying"
          @click="toBuyTicket(item.id, item.nm)"
          >购票</span
        >
        <span v-show="coming" class="reserve" @click="addSee(item.id)"
          >收藏</span
        >
        <span v-show="search" class="search" @click="todetail(item.id)"
          >详情</span
        >
      </van-col>
      <van-col style="widt:100%" span="24"> <van-divider :style="{ color: '#1989fa', borderColor: '#777', padding: '0 14px' }" /></van-col>
    
    </van-row>
     
  </div>
</template>

<script>
import { GetdetailAPI } from "@/api/api.js";
export default {
  name: "VueMoviesBoxList",
  props: {
    movieList: {
      type: Array,
    },
    coming: {
      type: Array,
    },
    search: {
      type: Array,
    },
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {
    todetail(id) {
      this.$router.push({ path: "/detail/" + id });
    },
    toBuyTicket(id, nm) {
      this.$router.push({
        path: "/buyticket",
        query: { id, nm },
      });
    },
    addSee(id) {
      GetdetailAPI({ movieid: id }).then((res) => {
        this.Detail = res.data;
        if (res.status == 200) {
          const Detail = res.data.movie;
          this.$store.commit("AADTOSEE", Detail);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>


.box {
  padding: 5px 0;
 
}
.van-row {
  height: 120px;
  margin:30px 18px  5px 18px;
 
  padding-top: 0px;
  border-radius: 5px;

  h3,
  p {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #7f7f7f;
    margin-top: 5px;
  }
  .h3h{
 padding: -1.5px 0px -1.5px 0px;

   margin-left: 3px;
   float:right;
line-height: 21px;
height: 21px;
font-size: 12px;
    }
  h3 {
     
    display:inline-block;
    font-size: 16px;
    color: #000;
    font-weight: 520;
    margin: 0;
    
  }
}
.van-row .van-col:nth-child(2) {
  padding: 5px;
}
.img {
  max-width: 90px;
  text-align: center;
  height: 100px;
 
  img {
     position: relative;
 
  display: block;
    width: 105px;
    max-width: 90px;
    height: 120px;
    border-radius: 8px;
  }
}
.van-row .van-col:nth-child(2) span {
  font-weight: 600;
  color: #efb23d;
}
.van-row .van-col:nth-child(3) {
  line-height: 120px;
  text-align: center;
}
.van-row .van-col:nth-child(3) span {
  padding: 5px;
  color: #fff;
  border-radius: 3px;
}
.color {
  color: #f03d37;
}
.buying {
  background-color: red;
  position: relative;
  z-index: 1;
}

.reserve {
  background-color: #589de0;
   position: relative;
  z-index: 1;
}

.search {
  background-color: #efb23d;
   position: relative;
  z-index: 1;
}

</style>